<template>
	<view class="indexHeader">
		<u-navbar :placeholder="true" :bgColor="bgColor">
			<template #left>
				<view></view>
			</template>
			<template #center>
				消息中心
			</template>
			<template #right>
				<view class=""  @click="toSearch()">
					<uni-icons color="#000" size="22" type="search" />
				</view>
			
			</template>
		</u-navbar>
	</view>
	<view class="bg">
		
	</view>
	<view class="messageBox" style="background-color: '';">
		<view class="messageBox-type">
			<view class="messageBox-item" @tap="messageType(1)">
				<image src="../../../static/f741ff0540c10d91dc3ff67925c0c16.png" mode="widthFix"></image>
				<view class="desc">
					招聘信息
				</view>
			</view>
			<view class="messageBox-item" @tap="messageType(2)">
				<image src="../../../static/0f448bfcee13bbbfe4a2b715b920ad1.png" mode="widthFix"></image>
				<view class="desc">
					商家回复
				</view>
			</view>
			<view class="messageBox-item" @tap="messageType(3)">
				<image src="../../../static/8a602e455e67d46da25f18a41a42082.png" mode="widthFix"></image>
				<view class="desc">
					服务通知
				</view>
			</view>
			<view class="messageBox-item" @tap="messageType(4)">
				<image src="../../../static/af014ec1df1dfef4fcd51a9c8a51a72.png" mode="widthFix"></image>
				<view class="desc">
					互动消息
				</view>
			</view>
		</view>
		<view class="messageList">
			<view class="conversation-list" @scroll="onScroll">
			    <view v-if="connectionStatusDesc" style="text-align: center; padding: 5px 0">{{ connectionStatusDesc}}</view>
			    <uni-list :border="true" @scroll="onScroll">
			        <view
			            @click="showConversation(conversationInfo)"
			            v-for="conversationInfo in sharedConversationState.conversationInfoList"
			            :key="conversationInfoKey(conversationInfo)"
			            v-bind:class="{top:conversationInfo.top }"
			        >
			            <ConversationItemView v-if="conversationInfo.conversation.target!=='-e'" :conversation-info="conversationInfo" @longpress.native="showConversationContextMenu($event, conversationInfo)"/>
			        </view>
			    </uni-list>
			
			    <chunLei-popups v-model="showContextMenu" :popData="contextMenuItems" @tapPopup="onContextMenuItemSelect" :x="contextMenuX" :y="contextMenuY" direction="column" theme="dark" :triangle="false" dynamic/>
			    <main-action-menu ref="mainActionMenu"></main-action-menu>
			</view>
			
			
		</view>
 <!--  <view class="conversation-list" @scroll="onScroll">
        <view v-if="connectionStatusDesc" style="text-align: center; padding: 5px 0">{{ connectionStatusDesc}}</view>
        <uni-list :border="true" @scroll="onScroll">
            <view
                @click="showConversation(conversationInfo)"
                v-for="conversationInfo in sharedConversationState.conversationInfoList"
                :key="conversationInfoKey(conversationInfo)"
                v-bind:class="{top:conversationInfo.top }"
            >
                <ConversationItemView :conversation-info="conversationInfo" @longpress.native="showConversationContextMenu($event, conversationInfo)"/>
            </view>
        </uni-list>

        <chunLei-popups v-model="showContextMenu" :popData="contextMenuItems" @tapPopup="onContextMenuItemSelect" :x="contextMenuX" :y="contextMenuY" direction="column" theme="dark" :triangle="false" dynamic/>
       <main-action-menu ref="mainActionMenu"></main-action-menu>
    </view> -->
	</view>
</template>

<script>
import * as im from '@/common/im.js';
import ConversationItemView from "./ConversationItemView";
import wfc from "@/wfc/client/wfc";
import ConnectionStatus from "@/wfc/client/connectionStatus";
import store from "@/store";
 import {useRouter} from 'uni-mini-router'

export default {
    name: 'ConversationListPage',
    data() {
        return {
			bgColor:'transparent',
            sharedConversationState: {
				conversationInfoList:[]
			},
            // sharedMiscState: store.state.misc,
			connectionStatusDesc:'',
            showContextMenu: false,
            contextMenuX: 0,
            contextMenuY: 0,
            contextMenuItems: [],
			imList:[{
				id:1,
				authUrl:'/static/images/boss.png',
				name:'张山',
				message:'你好我是什么什么',
				times:'22-10-01',
				isNew:true
			},
			{
				id:1,
				authUrl:'/static/images/boss.png',
				name:'张山',
				message:'你好我是什么什么你好我是什么什么你好我是什么什么',
				times:'22-10-01',
				isNew:false
			}
			],
			timer:null
        };
    },

    onShow() {
		this.timer = setInterval(()=>{
			store._loadConversationList()
			this.sharedConversationState.conversationInfoList = store.state.conversation.conversationInfoList
		},500)
		im.init({
			imFlag: 'recruitment',
			toUserId: '',
		}, () => {
			console.log('‘’‘’‘’‘’‘’',store.state.conversation);
		})
		
        console.log('conversationList onShow', this.sharedConversationState.conversationInfoList.length)
    },
	onLoad() {

	},
	mounted() {
	},
	created() {
		console.log(store.state.conversation)
	},
    onHide(){
        console.log('conversationList onHide');
		clearInterval(this.timer)
      //  this.$refs.mainActionMenu.hide();
    },

    

    methods: {
		
		toSearch(){
			console.log(132);
			uni.navigateTo({
			    url: '/pages/im/search/SearchPortalPage'
			});
			
		},
		messageType(type){
			uni.navigateTo({
				url:`/pages/im/conversationList/recruit?type=${type}`
			})
		},
		go2ConversationPage(){
			let pages = getCurrentPages();
			let cvRoute = 'pages/im/conversation/ConversationPage'
			let delta = 0;
			let found = false;
			for (let i = pages.length - 1; i >= 0; i--) {
				if (pages[i].route === cvRoute) {
					found = true;
					break;
				} else {
					delta++;
				}
			}
			if (found) {
				uni.navigateBack({
					delta: delta,
					fail: err => {
						console.log('nav back to conversationView err', err);
					}
				});
			} else {
				uni.navigateTo({
					url: '/pages/im/conversation/ConversationPage',
					success: () => {
						console.log('nav to conversationPage success');
		
					},
					fail: (err) => {
						console.log('nav to conversationPage err', err);
					}
				})
			}
		},
		clearNoready(){},
        showConversation(conversationInfo) {
            store.setCurrentConversationInfo(conversationInfo);
			this.go2ConversationPage()
        },

        removeConversation(conversationInfo) {
            store.removeConversation(conversationInfo.conversation);
        },

        conversationInfoKey(conversationInfo) {
            let conv = conversationInfo.conversation;
            return conv.target + '-' + conv.type + '-' + conv.line;
        },
        scrollActiveElementCenter() {
            let el = this.$el.getElementsByClassName("active")[0];
            el && el.scrollIntoView({behavior: "instant", block: "center"});
        },

        onScroll() {
            // TODO
        },

        showConversationContextMenu(e, conversationInfo) {
            this.contextMenuX = e.touches[0].clientX;
            this.contextMenuY = e.touches[0].clientY;
            this.contextMenuItems = [];

            this.contextMenuItems.push({
                title: conversationInfo.top ? '取消置顶' : '置顶',
                tag: 'top',
                conversationInfo: conversationInfo,
            })

            this.contextMenuItems.push({
                title: conversationInfo.isSilent ? '取消静音' : '静音',
                tag: 'silent',
                conversationInfo: conversationInfo,
            })

            this.contextMenuItems.push({
                title: '删除会话',
                tag: 'delete',
                conversationInfo: conversationInfo,
            })

            this.contextMenuItems.push({
                title: conversationInfo._unread === 0 ? '标记为未读' : '标记为已读',
                tag: 'mark',
                conversationInfo: conversationInfo,
            })
            this.showContextMenu = true;

        },

        onContextMenuItemSelect(t) {
            switch (t.tag) {
                case 'delete':
                    store.removeConversation(t.conversationInfo.conversation);
                    break;
                case 'top':
                    store.setConversationTop(t.conversationInfo.conversation, t.conversationInfo.top > 0 ? 0 : 1);
                    break;
                case 'silent':
                    store.setConversationSilent(t.conversationInfo.conversation, !t.conversationInfo.isSilent);
                    break;
                case 'mark':
                    let conversation = t.conversationInfo.conversation;
                    if (t.conversationInfo._unread === 0) {
                        wfc.markConversationAsUnread(conversation, true);
                    } else {
                        wfc.clearConversationUnreadStatus(conversation);
                    }
                    break;
                default:
                    uni.showToast({
                        title: 'TODO ' + t.title,
                        icon: 'none'
                    })
                    break;

            }
        }
    },
    activated() {
        this.scrollActiveElementCenter();
    },

    computed: {
		// sharedConversationState(){
		// 	return store.state.conversation
		// },
   //      connectionStatusDesc() {
			// console.log(this.sharedMiscState.connectionStatus,'this.sharedMiscState.connectionStatus')
   //          let desc = '';
			// console.log(ConnectionStatus.ConnectionStatusConnecting)
			// console.log(ConnectionStatus.ConnectionStatusReceiveing)
			// console.log(ConnectionStatus.ConnectionStatusUnconnected)
			
   //          switch (this.sharedMiscState.connectionStatus) {
				
   //              case ConnectionStatus.ConnectionStatusConnecting:
   //                  desc = '正在连接...';
   //                  break;
   //              case ConnectionStatus.ConnectionStatusReceiveing:
   //                  desc = '正在同步...';
   //                  break;
   //              case ConnectionStatus.ConnectionStatusConnected:
   //                  desc = '';
   //                  break;
   //              case ConnectionStatus.ConnectionStatusUnconnected:
   //                  desc = '连接失败';
   //                  break;
   //          }
   //          return desc;
   //      }
    },

    components: {
        ConversationItemView,
    },
	mounted() {
		wfc.eventEmitter.on('connectionStatusChanged', (status) => {
		    console.log('connection status changed-------', status);
			if(status==-1){
				im.init({
					imFlag: 'investmentCenter',
					toUserId: '',
				}, () => {
					console.log('----------2',store.state.conversation);
				})
			}
			let desc = '';
			switch (store.state.misc.connectionStatus) {
			    case ConnectionStatus.ConnectionStatusConnecting:
			        desc = '正在连接...';
			        break;
			    case ConnectionStatus.ConnectionStatusReceiveing:
			        desc = '正在同步...';
			        break;
			    case ConnectionStatus.ConnectionStatusConnected:
			        desc = '';
			        break;
			    case ConnectionStatus.ConnectionStatusUnconnected:
			        desc = '连接失败';
			        break;
			}
			this.connectionStatusDesc = desc
		});
	}
};
</script>

<style lang="scss">
page {
		// background-color: #F1F3F4;
		position: relative;
		background: url('../../../static/images/communityBg.png') no-repeat;
}
.indexHeader{
	background: transparent;
}
.bg{
	width: 100%;
	height: 185.76px;
	opacity: 0.32;
	background: #D8D8D8;
	top: -25px;
	left: 0;
	position: absolute;
	z-index:-1;
}
.conversation-list {
    height: 100vh;
    overflow: auto;
    background: #ffffff;
}

.conversation-list .top {
    background-color: #f1f1f1;
}
.messageBox{
	padding: 0 15px;
	margin-top: 7px;
}
.messageBox-type{
	
	box-sizing: border-box;
	background-color: #fff;
	box-shadow: 0 2px 4px 0 #dbd9d980;
	border-radius: 10px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 15px 20px;
	.messageBox-item{
		display: flex;
		align-items: center;
		flex-direction: column;
		image{
			width: 48px;
			background: #D8D8D8;
			border-radius: 50%;
		}
		.desc{
			font-size: 12px;
			color: #333;
			margin-top: 8px;
		}
	}
	
}
.messageList{
	margin-top: 15px;
}

::v-deep .uni-list--border-top{
	height: 0!important;	
}
::v-deep .uni-list-chat__badge-text{
	display: none;
}
::v-deep .uni-badge--single {
    width: 9px!important;
    height: 9px!important;
}
::v-deep .uni-list-chat{
	background-color: #F1F3F4!important;
}
</style>
